<template>
  <div class="navbarMenu">
    <div class="navbarBox">
      <span
        :class="navMenuActive == index ? 'active' : ''"
        v-for="(item, index) in navMenu.list"
        :key="index"
        @click="emits('switchNavMenu', index, item)"
        >{{ item.name }}</span
      >
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits } from "vue";

const props = defineProps({
  navMenuActive: {
    type: Number,
    default: 0,
  },
});

// 方法
const emits = defineEmits(["switchNavMenu"]);

// 导航列表
const navMenu = reactive({
  list: [
    {
      name: "全部",
      statusList: null,
    },
    {
      name: "待付款",
      statusList: [0],
    },
    {
      name: "待发货",
      statusList: [1],
    },
    {
      name: "待收货",
      statusList: [2],
    },
    {
      name: "待评价",
      statusList: [3],
    },
  ],
});
</script>

<style lang="less" scoped>
.navbarMenu {
  position: fixed;
  background: #efefef;
  width: 100%;
  z-index: 2;
  .navbarBox {
    padding: 15px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    span.active {
      border-bottom: 3px solid #fa2c19;
      color: #fa2c19;
      padding-bottom: 2px;
    }
  }
}
</style>